<template>
  <div class="dashboard">
    <el-row>
      <el-tabs type="card" v-model="type" @tab-click="pageNo=1;fetchData()">
        <el-tab-pane label="待办" name="0"></el-tab-pane>
        <el-tab-pane label="处理中" name="1"></el-tab-pane>
        <el-tab-pane label="已完结" name="2"></el-tab-pane>
      </el-tabs>
      <!-- <el-col :sm="4">
        <h3>待办事项({{total}}个)</h3>
      </el-col>
      <el-col :sm="20" style="text-align:right;">
        <el-radio-group v-model="type" style="margin-top:25px;" @change="pageNo=1;fetchData()">
          <el-radio :label="0" value="0">待办</el-radio>
          <el-radio :label="2" value="2">历史</el-radio>
        </el-radio-group>
      </el-col>-->
    </el-row>
    <el-table
      ref="multipleTable"
      :data="listData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="reqComName" label="单位" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="requestUser" label="申请人" align="center"></el-table-column>
      <el-table-column prop="title" label="流程类型" align="center"></el-table-column>
      <el-table-column prop="requestDate" label="操作时间" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="taskName" label="当前任务" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="mark" label="备注" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="操作" show-overflow-tooltip align="center" width="150">
        <template slot-scope="scope">
          <div>
            <el-button
              type="success"
              @click="doEdit=false;viewTask(scope.row,false,type)"
              size="small"
            >查看</el-button>

            <!-- <el-button type="primary" @click="renling(scope.row)" size="small" v-if="type==0">认领</el-button> -->
            <el-button
              type="primary"
              @click="doEdit=true;viewTask(scope.row,true,type)"
              size="small"
              v-if="type==0||(type==2&&'ddusecar'==scope.row.formKey&&scope.row.status!=3)"
            >处理</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <usecar ref="usecarComp"></usecar>
    <diaoduComp ref="diaoduComp"></diaoduComp>
    <bzModify ref="bzModifyComp"></bzModify>
    <carcz ref="carczComp"></carcz>
    <paimai ref="paimaiComp"></paimai>
    <baofei ref="baofeiComp"></baofei>
    <tiaoji ref="tiaojiComp"></tiaoji>
    <carpb ref="carpbComp"></carpb>
    <carpbss ref="carpbssComp"></carpbss>
    <carpbss2 ref="carpbss2Comp"></carpbss2>
    <weixiu ref="weixiuComp"></weixiu>
    <carju ref="carjuComp"></carju>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  viewJson,
  sh,
  diaodu,
  mytaskListjson,
  renling,
  dwpbss,
} from "@/api/task";
import { findDetails } from "@/api/company";
import { bz } from "@/api/carbz";
import "./index.scss";
import usecar from "./components/usecar/usecar"; //用车审核组件
import diaoduComp from "./components/usecar/diaodu"; //用车审核完成后，司机的发车与结束组件
import bzModify from "./components/bzModify"; //单位编制组件
import carcz from "./components/carcz/carcz"; //车辆处置组件
import paimai from "./components/carcz/paimai"; //车辆处置的拍卖组件
import baofei from "./components/carcz/baofei"; //车辆处置的报废组件
import tiaoji from "./components/carcz/tiaoji"; //车辆处置的调剂组件
import carpb from "./components/carpb/carpb"; //车辆配备组件
import carpbss from "./components/carpb/carpb_ss"; //车辆配备实施组件 新购
import carpbss2 from "./components/carpb/carpb_ss2"; //车辆配备实施组件 调剂
import weixiu from "./components/weixiu/weixiu"; //车辆保养维修审核组件
import carju from "./components/carju/carju"; //车辆加油组件
export default {
  components: {
    usecar,
    bzModify,
    diaoduComp,
    carcz,
    paimai,
    tiaoji,
    baofei,
    carpb,
    carpbss,
    carpbss2,
    weixiu,
    carju,
  },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["selectedComIds"]),
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      this.pageNo = 1;
      this.fetchData();
    },
  },
  data: function () {
    return {
      total: 0,
      pageNo: 1,
      type: 0, //0待办任务 2历史任务
      pageSize: 10,
      listData: [], //全部数据
      listDataSelected: [], //选中数据
      tabIndex: "1",
      addcarDialogVisible: false,
      carpbData: null, //车辆配备新增的时候 临时保存当前操作的任务数据  新增成功后
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    /**
     * @description 查看或编辑任务
     * @param data 列表原始数据
     * @param doEdit 是否编辑任务
     * @param type 当前列表类型 0待办任务 2历史任务 二者在编辑时候有区别 要传给子组件做区分
     */
    async viewTask(data, doEdit, type) {
      //查看任务详情的参数  某些任务需要先在本页获取详细数据 根据数据显示不同的组件页面
      let params = {
        tableId: data.tableId,
        pid: data.processInstanceId,
        taskId: data.taskId,
        formKey: data.formKey,
      };
      if (data.processType == "usecar") {
        if (doEdit) {
          this.$refs.usecarComp.editTask(data, type);
        } else {
          this.$refs.usecarComp.viewTask(data, type);
        }
      } else if (data.processType == "diaodu") {
        if (doEdit) {
          this.$refs.diaoduComp.editTask(data, type, data.formKey);
        } else {
          this.$refs.diaoduComp.viewTask(data, type);
        }
      } else if (data.processType == "carbz") {
        if (doEdit) {
          this.$refs.bzModifyComp.editTask(data);
        } else {
          this.$refs.bzModifyComp.viewTask(data);
        }
      } else if (data.processType == "carcz") {
        if (
          data.formKey == "carcz_shenhe" ||
          data.formKey == "carcz_sp" ||
          data.formKey == "carcz_shenqing" ||
          data.formKey == "carcz_jbrqr"
        ) {
          if (doEdit) {
            this.$refs.carczComp.editTask(data, type);
          } else {
            this.$refs.carczComp.viewTask(data, type);
          }
        } else if (data.formKey == "carcz_ss") {
          let taskDetail = await viewJson(params);
          let clname = taskDetail.data.clname; //处置方式
          if (doEdit) {
            if (clname == "拍卖") {
              this.$refs.paimaiComp.editTask(data, type, taskDetail);
            } else if (clname == "调剂") {
              this.$refs.tiaojiComp.editTask(data, type, taskDetail);
            } else if (clname == "报废") {
              this.$refs.baofeiComp.editTask(data, type, taskDetail);
            }
          } else {
            if (clname == "拍卖") {
              this.$refs.paimaiComp.viewTask(data, type, taskDetail);
            } else if (clname == "调剂") {
              this.$refs.tiaojiComp.viewTask(data, type, taskDetail);
            } else if (clname == "报废") {
              this.$refs.baofeiComp.viewTask(data, type, taskDetail);
            }
          }
        }
      } else if (data.processType == "carpb") {
        let taskDetail = await viewJson(params);
        let clname = taskDetail.data.clname; //处置方式
        //车辆配备初审通过 进入实施阶段 申请人填写相关信息
        if (data.formKey == "carpb_ss" || data.formKey == "carpb_jbrjd") {
          if (doEdit) {
            if (clname == "新购") {
              this.$refs.carpbssComp.editTask(data, type);
            } else if (clname == "调剂") {
              this.$refs.carpbss2Comp.editTask(data, type);
            }
          } else {
            this.$refs.carpbComp.viewTask(data, type);
          }
        } else {
          if (doEdit) {
            this.$refs.carpbComp.editTask(data, type);
          } else {
            this.$refs.carpbComp.viewTask(data, type);
          }
        }
      } else if (data.processType == "carwx") {
        if (doEdit) {
          this.$refs.weixiuComp.editTask(data, type);
        } else {
          this.$refs.weixiuComp.viewTask(data, type);
        }
      } else if (data.processType == "carju") {
        if (doEdit) {
          this.$refs.carjuComp.editTask(data, type);
        } else {
          this.$refs.carjuComp.viewTask(data, type);
        }
      }
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = {
        pageNo: this.pageNo,
        type: this.type,
        pageSize: this.pageSize,
        comIds: this.selectedComIds.join(","),
      };

      let data = await mytaskListjson(params);
      if (data.error == 1 || !data.data) {
        this.listData.splice(0, this.listData.length);
        this.total = 0;
        this.listDataSelected.splice(0, this.listDataSelected.length);
        // this.$message({
        //   message: "获取数据失败",
        //   type: "error"
        // });
        return;
      }
      data.data.forEach((e) => {
        if (e.roleids) {
          e.roleids = e.roleids.split(",").map(function (e) {
            return Number.parseInt(e);
          });
        }
        if (!e.deptname) {
          e.deptname = "";
        }
        if (e.depId) {
          e.depId = Number.parseInt(e.depId) || 0;
        }
      });
      this.listData = data.data;
      this.total = data.total;
      this.listDataSelected.splice(0);
    },
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected.splice(0);
      val.forEach((e) => {
        this.listDataSelected.push(e);
      });
      console.log(this.listDataSelected);
    },
    //认领任务
    async renling(task) {
      let r = await renling({ taskId: task.taskId });
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
